<template>
	<el-container style="height:100%;">
		<el-header>
			<div class="panel-top">
				<div style="width:200px;text-align:center;font-size:20px;display:inline-block;">
					<template v-if="logo_type == '1'">
						<img :src="img" class="logo">
					</template>
					<template v-else>
						<span style="cursor: pointer;" @click="goHome()">{{title}}</span>
					</template>
				</div>
				<div class="pos-rel" style="display:inline;">
					<el-dropdown @command="handleMenu" class="user-admin" style="float:right;margin-right:25px;">
						<span class="el-dropdown-link c-gra" style="cursor: pointer;">{{username}}
							<i class="el-icon-caret-bottom"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="infor">账户信息</el-dropdown-item>
							<el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
							<el-dropdown-item command="logout">退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</div>
		</el-header>
		<el-container>
			<el-aside :class="collapsed ? 'menu-collapsed':'menu-expanded'" class="left-nva">
         <el-menu :unique-opened="true" :default-active="activeMenu($route)" :router="true">
            <leftMenu :menuData="menuData" :upKey="upKey" ref="leftMenu"></leftMenu>
          </el-menu>
			</el-aside>
      
			<el-main class="panel-c-c-c left-nva">
        <div style="position: absolute;z-index: 99;bottom: calc(50% - 50px);left:0;">
          <div :class="collapsed?'tools pull-right close-arrow':'tools pull-right open-arrow'" @click.prevent="collapse">
            <i :class="collapsed?'fa el-icon-d-arrow-right':'fa el-icon-d-arrow-left'"></i>
          </div>
        </div>
				<!-- <router-view v-loading="showLoading" v-if="isRouterAlive"></router-view> -->
        <router-view v-if="isRouterAlive"></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>
<style scoped>
.menu-collapsed{
  /* flex : 0 0 60px; */
  /* flex : 0 0 0px; */
  /* width: 0px; */
  animation          : e-fade-out 0.5s;
  -moz-animation     : e-fade-out 0.5s;
  -webkit-animation  : e-fade-out 0.5s;
  -o-animation       : e-fade-out 0.5s;
  animation-fill-mode: forwards;
}
.tools{
  /* border-top:1px solid blue;
  border-right:1px solid blue;
  border-bottom:1px solid blue; */
  width: 18px;
  height: 100px;
  line-height: 100px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  cursor: pointer
}
.tools:hover{
  background-color: #515a6e;
  color:#fff;
}
.menu-expanded{
  /* flex : 0 0 200px; */
  /* width: 200px; */
  animation          : e-fade-in 0.5s;
  -moz-animation     : e-fade-in 0.5s;
  -webkit-animation  : e-fade-in 0.5s;
  -o-animation       : e-fade-in 0.5s;
  animation-fill-mode: forwards;
}
@keyframes e-fade-in {0% {flex: 0 0 0;width:0;} 100% {flex: 0 0 200px;width:200px;}}
@keyframes e-fade-out {0% {flex: 0 0 200px;width:200px;};100% {flex: 0 0 0;width:0;}}
@-moz-keyframes e-fade-in {0% {flex: 0 0 0;width:0;} 100% {flex: 0 0 200px;width:200px;}}
@-moz-keyframes e-fade-out {0% {flex: 0 0 200px;width:200px;};100% {flex: 0 0 0;width:0;}}
@-webkit-keyframes e-fade-in {0% {flex: 0 0 0;width:0;} 100% {flex: 0 0 200px;width:200px;}}
@-webkit-keyframes e-fade-out {0% {flex: 0 0 200px;width:200px;};100% {flex: 0 0 0;width:0;}}
@-o-keyframes e-fade-in {0% {flex: 0 0 0;width:0;} 100% {flex: 0 0 200px;width:200px;}}
@-o-keyframes e-fade-out {0% {flex: 0 0 200px;width:200px;};100% {flex: 0 0 0;width:0;}}

.el-header{
  padding: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}
.panel {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
}
.panel-top {
  height: 60px;
  line-height: 60px;
  background: #515a6e;
  color: #fff;
}
@media screen and (max-width: 1200px) {
  .panel-top .pos-rel {
    width: 770px;
  }
}
.panel-center {
  background: #324057;
  position: absolute;
  top: 60px;
  bottom: 0px;
  overflow: hidden;
}
.panel-c-c {
  background: #f1f2f7;
  right: 0px;
  top: 0px;
  bottom: 0px;
  left: 180px;
  overflow-y: scroll;
  padding: 20px;
}
.panel-c-c-c {
  background: #f1f2f7;
  position: relative;
}
.logout {
  /* background: url(../assets/images/logout_36.png); */
  background-size: contain;
  width: 20px ;
  height: 20px;
  float: left;
}
.logo {
  width: 190px;
  float: left;
  height: 45px;
  margin: 5px;
}
.tip-logout {
  float: right;
  margin-right: 20px;
  padding-top: 5px;
  cursor: pointer;
}
.admin {
  color: #c0ccda;
  text-align: center;
}
.hide-leftMenu {
  left: 0px;
}
.auto-scroller{
  overflow: auto;
}
/* 头部导航栏时间 */
.header-time {
  display: inline-block;
  margin-right: 15px;
}
/* 用户名设置 */
.user-admin {
  display: inline-block;
  margin-right: 15px;
}
/* 网页换肤 */
.hwskin {
  position: absolute;
  top: 0;
  right: 0;
}
.hwskin span,
.user-admin span {
  color: #fff;
}

/* .user-admin span{
    display:block;
    width:30px;
    height:60px;
    border-radius:50%;
  }
  .user-admin span img{
    width:30px;
    height:30px;
    border-radius:50%;
  }
  .user-admin span img{
    margin-top:15px;
  } */
/*侧边栏缩放按钮*/
.sidebar-scaling {
  padding-left: 10px;
  cursor: pointer;
  width: 20px;
  display: inline-block;
  position: absolute;
  left: 0px;
}

</style>
<script>
import leftMenu from "./Common/leftMenu";
import http from "../assets/js/http";
export default {
  provide(){
	  return {reload :  this.reload,}
  },
  data() {
    return {
      isRouterAlive : true,
      username: "",
      nowTime: "",
      weathers: "",
      weatherPic: "",
      topMenu: [],
      childMenu: [],
      menuData: [],
      hasChildMenu: false,
      menu: null,
      module: null,
      img: "",
      title: "DXFW框架",
      logo_type: null,
      collapsed: false,
      upKey: 1,
    };
  },
  methods: {
    reload(){
		  this.isRouterAlive = false;
		  this.$nextTick(()=>{
			  this.isRouterAlive = true;
		  });
	  },
    goHome(){
       this.$router.push({path: "/"})
    },
    //折叠导航栏
		collapse : function(){
			this.collapsed=!this.collapsed;
		},

    logout() {
      this.$confirm("确认退出吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          _g.openGlobalLoading();

          this.apiPost("login/loginOut").then(res => {
            _g.closeGlobalLoading();
            this.handelResponse(res, data => {
              // Lockr.rm('menus')
              Lockr.rm("token");
              // Lockr.rm('rememberKey')
              // Lockr.rm('authList')
              Lockr.rm("userInfo");
              // Lockr.rm('sessionId')
              // Cookies.remove('rememberPwd')
              _g.toastMsg("success", "退出成功");
              setTimeout(() => {
                router.replace("/");
              }, 500);
            });
          });
        })
        .catch(() => {});
    },
    switchTopMenu(item) {
      if (!item.child) {
        router.push(item.url);
      } else {
        router.push(item.child[0].child[0].url);
      }
    },
    handleMenu(val) {
      switch (val) {
        case "logout":
          this.logout();
          break;
        case "changePwd":
          this.changePwd();
          break;
        case "infor":
          this.infor();
          break;
      }
    },
    changePwd() {
      router.push({ path: "/home/sys/change" });
      // this.$refs.changePwd.open();
    },
    infor() {
      router.push({ path: "/home/uum/user/infor" });
    },
   
    getUsername() {
      let date = new Date();
      let self = this;
      function tick(){
        self.nowTime =moment().format('YYYY-MM-DD HH:mm:ss');//  moentself.formatDate(date, "yyyy-MM-dd hh:mm:ss");
        setTimeout(()=>{
          tick();
        },1000);
      }
      tick();
     
      //  this.nowTime=date.toLocaleString();
      let userInfo = Lockr.get("userInfo");
      if (userInfo != undefined) {
        if (!userInfo.loveName) {
          this.username = userInfo.username;
        } else {
          this.username = userInfo.loveName;
        }
      } else {
        this.username = "admin";
      }

      // this.username = Lockr.get('userInfo').username
      // this.username = 'admin'
    },
    getWeaTher() {
      // var myCity = new BMap.LocalCity();
      // myCity.get(this.myFun);
    },
    
    isLogin() {
      let token = Lockr.get("token");
      if (!token) {
        _g.toastMsg("warning", "您尚未登录");
        setTimeout(() => {
          router.replace("/"); 
        }, 1000);
      } 
      else {
        this.apiGet("/user/findCurrentUser").then(res => {
          if (res.code === 200) {
            //已登录
          } else {
              Lockr.rm("token");
              Lockr.rm("userInfo");
              _g.toastMsg("warning", "您尚未登录");
              setTimeout(() => {
                router.replace("/");
              }, 1000);
            }
        })
      }
    },
    
  },
  created() {
    // this.getTitleAndLogo()

    // // let sessionId = Lockr.get('sessionId')
    // if (!token) {
    //   _g.toastMsg('warning', '您尚未登录')
    //   setTimeout(() => {
    //     router.replace('/')
    //   }, 1000)
    //   return
    // }
    SysSetting.then(res=>{
      if(res.logo){
          this.logo_type = '1';
      }else{
          this.logo_type = '2';
      }
      this.title = res.title;
      document.title = this.title;
      this.img = window.HOST + res.logo;
      // console.log(this.logo);
    });

    this.isLogin();
    this.getUsername();
    this.getWeaTher();
    // console.log(Lockr.get('menus'))
    let menus = Lockr.get('menus')
    // this.getTree();
    // let menus = this.demo;
    this.menu = this.$route.meta.menu;
    this.module = this.$route.meta.module;
    this.topMenu = menus;
    _(menus).forEach(res => {
      if ("mModule" == this.module) {
        this.menuData = res.privilegeVOList;
        res.selected = true;
      } else {
        res.selected = false;
      }
    });
    // console.log(this.menuData);
  },
  computed: {
    routerShow() {
      return store.state.routerShow;
    },
    activeMenu(){
  
      return (router)=>{
          return router.meta.menu
      }
      
    }
  },
  components: {
    leftMenu
    // changePwd
  },
  watch: {
    $route(to, from) {
      _(this.topMenu).forEach(res => {
        if (res.module == to.meta.module) {
          res.selected = true;
          if (!to.meta.hideLeft) {
            this.menu = to.meta.menu;
            this.menuData = res.privilegeVOList;
          }
        } else {
          res.selected = false;
        }
      });
    }
  },
  mixins: [http]
};
</script>
